<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<wlk-navbar navbarType='3' title="线路搜索"></wlk-navbar>
		<view class="search-content">
			<u-search placeholder="请输入关键词/目的地" v-model="keyword" :actionStyle="{ color:themeColor
            }" height="38" @search="jump(keyword)" :focus="true" @custom="jump(keyword)" actionText="搜索" 
			:searchIconColor="themeColor" margin="30rpx 0"></u-search>
			<view>
				<view class="title bold">大家都在搜</view>
				<view class="wlkflex wrap">
					<view class="tag-item" v-for="(tag,index) in list">
						<u-tag :text="tag.name" @click="jump" :name="tag.name" type="info" color="#333333"
							bgColor="#f3f3f3" borderColor="#f3f3f3" shape="circle"></u-tag>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _self;
	import {
		toUrl
	} from '@/wlkutils/tools';
	import {
		mapGetters
	} from 'vuex';
	import share from "@/wlkutils/share";
	export default {
		computed: {
			...mapGetters(['themeColor']),
		},
		data() {
			return {
				keyword: '',
				list: [],
				url: '',
			};
		},
		onLoad(option) {
			_self = this;
			if (option.keyword) {
				this.keyword = option.keyword;
			}
			if (option.url) {
				this.url = option.url
			}
		},
		onShow() {
			this.getData();
		},
		onShareAppMessage(res) {
			return share.setShareInfo();
		},
		methods: {
			getData() {
				uni.$u.http.post('hotword/getList', {
					id: _self.id
				}).then(res => {
					_self.list = res.data.list;
				})
			},
			jump(index) {
				if (!uni.$u.test.isEmpty(index)) {
					toUrl(this.url + '?keyword=' + index);
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;

		.search-content {
			width: 92%;
			margin: 0 auto;

			.title {
				margin: 40rpx 0 20rpx 0;
			}

			.tag-item {
				margin: 20rpx 20rpx 0 0;
			}
		}
	}
</style>